<template>
  <div class="DetailsAnnouncement">
    <div class="DetailsAnnouncement_l">
      <p>{{$t('message.Other')}}</p>

      <ul>
        <router-link v-for="(item,index) in oticeListMsg" :key="index" tag="li" :to="'/DetailsAnnouncement?id='+item.messageId">
            <p><span></span>{{item.title}}</p>
        </router-link>
        <!-- <li v-for="(item, index) in oticeListMsg">
          <p>{{item.title}}</p>
          <span></span>
        </li> -->
      </ul>
    </div>
    <div class="DetailsAnnouncement_r">
      <p class="notice">
        {{$t('message.cement')}}
        <span>{{$t('message.Announcement')}}</span>
      </p>
      <p class="title">{{title}}</p>
      <div>
        <img src alt />
        <!-- <p>房产网</p> -->
        <p>{{$t('message.Updateon')}}{{time}}</p>
      </div>

      <p class="content">{{content}}</p>
    </div>
  </div>
</template>
<script>
// import { regularAnnouncement } from "../api/api";
export default {
  data() {
    return {
      oticeListMsg: [],
      content: "",
      title: "",
      time: "",
      shuiji: ""
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let data = {
        page: 1,
        rows: 1000,
        type: 0
      };
      regularAnnouncement(data).then(res => {
        this.oticeListMsg = res.data.data;
        for (let i = 0; i < this.oticeListMsg.length; i++) {
          if (this.$route.query.id == this.oticeListMsg[i].messageId) {
            this.content = this.oticeListMsg[i].content;
            this.title = this.oticeListMsg[i].title;
            this.time = this.oticeListMsg[i].createTime;
          }
        }

        console.log(this.content);
      });
    },
    // aaa(id) {
    //   this.$route.query.id = id;
    //   this.init();
    // }
  },
  watch: {
    $route(to, from) {
      console.log(to.path);
      this.init()
    }
  }
};
</script>
<style lang="scss" scoped>
.DetailsAnnouncement {
  min-height: 95vh;
  margin:0 auto;
  width: 1200px;
  background: #fff;
  .title {
    line-height: 100px;
    font-weight: 700;
    font-size: 20px;
    padding-left: 50px;
  }
  > div p {
    padding-left: 50px;
    line-height: 26px;
  }
  .DetailsAnnouncement_l {
    width: 20%;
    // background: pink;
    float: left;

    p {
      padding: 10px;
      color: #8c979d;
    }
    > p {
      font-weight: 700;
      font-size: 18px;
      color: #000;
    }
  }
  .DetailsAnnouncement_r {
    width: 80%;
    // background: skyblue;
    float: left;
    padding: 25px;
    .notice {
      color: #f7f7fb;
    }
    .title {
      line-height: 50px;
      font-weight: 700;
    }
    .content {
      padding: 50px;
      line-height: 22px;
      color: #8c979d;
    }
  }
}
</style>